<template>
  <div>
    <NavHeader></NavHeader>
    <main>
      <!-- 购物车列表 -->
      <div class="container">
        <div class="cart-title">购物车</div>
        <div class="cart-list">
          <!-- 商品标题 -->
          <ul class="list-head">
            <li>
              <el-checkbox v-model="allChecked" @change="handlerallChecked"
                >全选</el-checkbox
              >
            </li>
            <li>商品名称</li>
            <li>单价</li>
            <li>数量</li>
            <li>操作</li>
          </ul>
          <!-- 商品内容 -->
          <ul class="list-container" v-for="item in list" :key="item.id">
            <li class="list-choice">
              <el-checkbox v-model="item.checked" @change="handlerChecked(item)"
                >单选</el-checkbox
              >
            </li>
            <li class="list-img">
              <div class="item-img">
                <!-- <img :src="item.s_good.s_goods_photos[0].path" alt="" /> -->
                <img
                  :src="item.s_good.s_goods_photos[0].path"
                  class="imggoods"
                />
                <div class="img-name">{{ item.s_good.name }}</div>
              </div>
            </li>
            <li class="list-price">
              {{ `￥${item.num * item.s_good.price}.00` }}
            </li>
            <li class="list-num">
              <el-input-number
                v-model="item.num"
                @change="handleChange(item.id, item.num)"
                :min="1"
                :max="10"
                class="numw"
              ></el-input-number>
            </li>
            <!-- 铭感操作 我会通常情况下就会弹出个弹窗出来
            询问用户是否继续当前操作 --- 提示框
            1.
             -->
            <li class="list-del" @click="del(item)">
              <i class="el-icon-delete icon"></i>
            </li>
          </ul>
        </div>
        <!-- 商品操作 -->
        <div class="cart-msg">
          <div class="msg-left">
            <i class="el-icon-goods cart-return" @click="goindex">继续购物</i>
            <span class="cart-total"
              >共<i>{{ list.length }}</i
              >件商品，已选择<i>{{ sum.total }}</i
              >件</span
            >
          </div>
          <div class="msg-right">
            <span>
              <i class="left">应付:</i
              ><i class="right">{{ `￥${sum.totalPrice}.00` }}</i></span
            >
            <el-button class="msg-btn" type="primary" @click="goOrder"
              >去结算</el-button
            >
          </div>
        </div>
      </div>
    </main>
    <NavFooter></NavFooter>
  </div>
</template>

<script>
import Modal from "../components/Modal.vue";
import NavHeader from "../components/NavHeader2.vue";
import NavFooter from "../components/NavFooter.vue";
import {
  getCart2,
  getCart,
  updateCart,
  delCart,
  getGoods,
  getDetailgoods,
} from "../assets/request";
export default {
  components: {
    NavHeader,
    NavFooter,
    Modal,
  },
  data() {
    return {
      num: 1,
      allChecked: null,
      checked: true,
      list: [],
      goods: [],
      del_icon: "",
    };
  },
  async created() {
    let icon = await getDetailgoods(966);
    this.del_icon = icon.s_goods_photos[0].path;
    let res = await getCart2({ project_id: 78 });
    this.list = res;
    this.list.forEach((ele) => {
      this.$set(ele, "checked", true);
    });
  },
  methods: {
    goOrder() {
      let listJson = JSON.stringify(this.list.filter((ele) => ele.checked));
      sessionStorage.setItem("goodslist", listJson);
      this.$router.push("/order/orderconfirm");
    },
    handlerChecked() {
      this.allChecked = this.list.every((ele) => ele.checked);
    },
    handlerallChecked() {
      this.list.forEach((ele) => {
        ele.checked = this.allChecked;
      });
    },
    async handleChange(id, num) {
      await updateCart(id, {
        num,
      });
    },
    async del(item) {
      // 先弹出弹窗
      this.$confirm("确定要删除这个商品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //删除数据
          await delCart(item.id);
          this.list = await getCart2({
            project_id: 78,
          });
          this.list.forEach((ele) => {
            this.$set(ele, "checked", true);
          });
          this.$message({
            type: "success",
            message: "成功删除！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除！",
          });
        });
    },
    goindex() {
      this.$router.push("./index");
    },
  },
  computed: {
    sum() {
      let total = this.list.filter((ele) => ele.checked); //选择的商品 返回的是新数组
      let totalPrice = total.reduce(
        (sum, ele) => (sum += ele.num * ele.s_good.price),
        0
      );
      return { total: total.length, totalPrice };
    },
  },
};
</script>

<style lang="scss" scoped>
main {
  width: 100vw;
  // height: 100vh;
  background: #f5f5f5;
  padding: 40px 0 100px 0;
  .container {
    width: 1500px;
    box-sizing: border-box;
    background: #fff;
    margin: auto;
    padding: 30px 40px;
    margin-top: 20px;
    .cart-title {
      font-size: 18px;
      color: #333;
      padding-bottom: 16px;
    }
    .list-head {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50px;

      border-bottom: 1px solid #f5f5f5;
      li {
        width: 23%;
        text-align: center;
      }
    }
    .list-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 92px;
      text-align: center;
      padding: 14px 0;
      border-bottom: 1px solid #f5f5f5;
      .list-choice {
        width: 23%;
      }
      .list-img {
        width: 23%;

        .item-img {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .imggoods {
            position: relative;
            width: 120px;
            height: 80px;
          }
          .img-name {
            width: 45%;
            font-size: 14px;
            color: #333;
          }
        }
      }
      .list-price {
        width: 23%;
        font-size: 14px;
        color: #333;
      }
      .list-num {
        width: 23%;
        .numw {
          width: 135px;
        }
      }
      .list-del {
        width: 23%;
        cursor: pointer;
        .icon {
          font-size: 20px;
          color: #333;
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
    .cart-msg {
      padding: 40px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .msg-left {
        .cart-return {
          font-size: 14px;
          color: #757575;
          cursor: pointer;
          &:hover {
            transition: color 0.3s ease, top 0.3s ease;
            color: #ff6700;
          }
        }
        .cart-total {
          margin-left: 16px;
          padding-left: 16px;
          border-left: 1px solid #eee;
          font-size: 14px;
          color: #757575;
          i {
            font-style: normal;
            color: #ff6700;
            font-size: 14px;
          }
        }
      }
      .msg-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          padding-right: 30px;
          .left {
            font: 14px;
            font-style: normal;
            text-align: left;
          }
          .right {
            font-size: 30px;
            font-style: normal;
            text-align: right;
            color: #333;
          }
        }
        .msg-btn {
          background: #f34141;
          color: #fff;
          font-size: 16px;
          border-color: #f34141;
          &:hover {
            filter: grayscale(20%);
          }
        }
      }
    }
  }
}
</style>